<%@ tag language="java" pageEncoding="UTF-8" body-content="scriptless" trimDirectiveWhitespaces="true"%>
<%@ attribute name="id" type="java.lang.String" required='true' description="div id"%>
<%@ attribute name="onNewTabActived" type='java.lang.String' required='false'%>
<%@ attribute name="fade" type="java.lang.Boolean" description="tab fade"%>
<div id="${id}">	
	<ul class="nav nav-tabs">
	</ul>
	<div class="tab-content">
	 	<jsp:doBody/>
	</div>
</div>
<script type="text/javascript">
(function(){
	var onNewTabActived = "${onNewTabActived}"=="" ? undefined  : eval("${onNewTabActived}");
	$('[data-tab]').on('shown.zui.tab', function(e) {
		onNewTabActived && onNewTabActived();
	});
	
	var $ul = $("#${id} ul");
	//找到tab对应的ul
	$("#${id} .tab-pane").each(function(){
		var title = $(this).attr("data-divTitle");
		var active = $(this).attr("data-active")=="true";
		$(this).addClass("${fade}"=="true"?"fade" : "");
		var id = $(this).prop("id");
		var $temp = $("<li><a data-tab></a></li>")
		active && $temp.addClass("active");
		$temp.find("a").attr("href","#"+id).text(title);
		$ul.append($temp);
	});
})();
</script>
